<template>
	<view class="flow-status-one" v-if="props.barType == 0" :class="{ 'type-row': props.isRow }" :style="{ '--primary-active-color': activeColor }">
		<view class="flow-status-item" :class="{ 'current': index <= props.procedureCurrent  }" v-for="(item,index) in props.procedureList">
			<view class="status-item-point">{{ index + 1 }}</view>
			<view class="status-item-text">{{ item.name }}</view>
		</view>
		
		<view class="flow-status-bar" :style="{ '--primary-active-num': num }">
			<view class="status-bar-active"></view>
			<view class="status-bar-text" v-if="props.procedureCurrent + 1 != props.procedureList.length && props.procedureTips">进行中</view>
		</view>
	</view>

	<view class="flow-status-two" :style="{ '--primary-active-color': activeColor }" v-else>
		<template v-for="(item,index) in props.procedureList">
			<view class="flow-status-item" :class="{ 'finish': index < props.procedureCurrent,'current': index == props.procedureCurrent  }">
				<view class="status-item-point">{{ index < props.procedureCurrent ? '✓' : index + 1 }}</view>
				<view class="status-item-text">
					<view>{{ props.procedureTips ? '步骤' + (index + 1) : item.name }} </view>
					<view v-if="props.procedureTips" class="status-item-tips">{{ item.name }}</view>
				</view>
			</view>
			<view class="flow-status-bar" :class="{ 'current': index < props.procedureCurrent }" v-if="index + 1 != props.procedureList.length"></view>
		</template>
	</view>
</template>

<script setup>
import { ref,defineProps } from 'vue'

/**
 * buttonTab 流程进度
 * @description 
 * @property {Number} barType 进度模式 0 1
 * @property {Boolean} isRow 是否横向
 * @property {Number} procedureCurrent 当前进行中的步骤 0开始
 * @property {Boolean} procedureTips 模式一：进行中文案是否显示 模式二：文案是否两层
 * @property {Array} procedureList 数据源 name: 步骤名
 */
const props = defineProps({
	barType: {
		type: Number,
		default: 0,
	},
	isRow: {
		type: Boolean,
		default: true
	},
	procedureCurrent: {
		type: Number,
		default: 0,
	},
	procedureTips: {
		type: Boolean,
		default: true
	},
	activeColor: {
		type: String,
		default: 'green'
	},
	procedureList: {
		type: Array,
		default: [{
			name: '付款'
		},{
			name: '发货'
		},{
			name: '收货'
		},{
			name:'完成'
		}]
	}
})
const num = ref('75rpx');
num.value = (props.procedureCurrent + 1 == props.procedureList.length ? 0 : 25) + 50 * ( 2 * props.procedureCurrent + 1) + 'rpx';

</script>

<style lang="scss">
.flow-status-one {
	display: inline-flex;
	flex-direction: column;
	position: relative;
	gap: 50rpx;
	margin-left: 80rpx;
	
	.flow-status-item {
		display: flex;
		gap: 20rpx;
		align-items: center;
		.status-item-point {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			color: #fff;
			background-color: #ccc;
			line-height: 50rpx;
			text-align: center;
		}
		.status-item-text {
			font-size: 20rpx;
		}
		&.current {
			.status-item-point {
				background-color: var(--primary-active-color);
			}
		}
	}
	.flow-status-bar {
		position: absolute;
		height: 100%;
		background-color: #ccc;
		width: 16rpx;
		z-index: -1;
		left: 17rpx;
		.status-bar-active {
			height: var(--primary-active-num);
			background-color: var(--primary-active-color);
		}
		.status-bar-text {
			position: absolute;
			padding: 2rpx 5rpx;
			white-space: nowrap;
			color: #fff;
			background-color: var(--primary-active-color);
			border-radius: 5rpx;
			font-size: 12rpx;
			top: var(--primary-active-num);
			left: 0;
			transform: translate(calc(-100% - 10rpx),-50%);
			&::after {
				content: '';
				width: 0;
				height: 0;
				position: absolute;
				border-width: 5rpx;
				border-style: solid;
				border-color: transparent transparent transparent var(--primary-active-color);
				top: 50%;
				right: 0;
				transform: translate(100%,-50%);
			}
		}
	}
	
	&.type-row {
		flex-direction: row;
		margin-top: 40rpx;
		margin-left: 20rpx;
		.flow-status-item {
			flex-direction: column;
			gap: 10rpx;
		}
		.flow-status-bar {
			height: 18rpx;
			width: 100%;
			top: 25rpx;
			left: 50%;
			transform: translate(-50%,-50%);
			.status-bar-active {
				height: 100%;
				width: var(--primary-active-num);
				background-color: var(--primary-active-color);
			}
			.status-bar-text {
				top: 0;
				left: var(--primary-active-num);
				transform: translate(-50%,calc(-100% - 10rpx));
				&::after {
					content: '';
					width: 0;
					height: 0;
					position: absolute;
					border-width: 5rpx;
					border-style: solid;
					border-color: var(--primary-active-color) transparent transparent transparent;
					top: 100%;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
}

.flow-status-two {
	display: flex;
	gap: 15rpx;
	align-items: center;
	.flow-status-item {
		display: flex;
		gap: 10rpx;
		align-items: center;
		color: #ccc; 
		.status-item-point {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			box-sizing: border-box;
			border: 1rpx solid #ccc;
			line-height: 50rpx;
			text-align: center;
		}
		.status-item-text {
			position: relative;
			font-size: 20rpx;
			.status-item-tips {
				position: absolute;
				bottom: 0;
				transform: translateY(100%);
				white-space: nowrap;
			}
		}
		&.current {
			.status-item-point {
				background-color: var(--primary-active-color);
				color: #fff;
			}
			.status-item-text {		
				color: #000; 
				font-weight: bold;
			}
		}
		&.finish {
			.status-item-point {
				border-color: var(--primary-active-color);
				color: var(--primary-active-color);
			}
		}
	}
	
	.flow-status-bar {
		height: 4rpx;
		flex: 1;
		background-color: #ccc;
		&.current {
			background-color: var(--primary-active-color);
		}
	}
}
</style>